<template>
    <Row>
        <div class="wrapper">
            <h4>
               新增信息{{value1}}
            </h4>
        </div>
        <div class="wrapper">
            <span class="modalName">服务器名：</span><input class="modalInput" v-model="value1" @on-change="value1Change">
        </div>
        <div class="wrapper">
            <span class="modalName">地址：</span><input class="modalInput" v-model="value2" @on-change="value2Change" />
        </div>
    </Row>
</template>
<script>
  export default {
    name: 'modalMessage',
    data() {
      return {
        value1:'',
        value2:''
      }
    },
    methods:{
      value1Change() {
        var obj = this
        this.$emit('value1', obj.value1)
      },
      value2Change() {
        var obj = this
        this.$emit('value2', obj.value2)
      }
    }
  }
</script>
<style scoped>
    .wrapper{
        padding: 10px 0;
    }
    .modalName{
        text-align: right;
        display: inline-block;
        width: 25%;
        font-size: 16px;
    }
    .modalInput{
        width: 60%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        box-sizing: border-box;
        color: #1f2d3d;
        height: 36px;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        font-size: 16px;
    }
</style>